{% extends  'm/base.html' %}
{% block title %}用户商品关键字Beta{% endblock %}

{% block custom_css_js %}
<style>
  .title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #555;
    line-height: 25px;
    margin-bottom: 6px;
    text-align: left;
  }
  .summary {
    line-height: 25px;
    color: #777;
    padding-right: 0;
    text-align: left;
  }
  .price {
    padding: 15px 10px 8px;
    overflow: hidden;
    margin: 0;
  }
  .price em {
    float: left;
    text-align: left;
    color: #e6312a;
    width: 65%;
    height: 25px;
    line-height: 25px;
    font-size: 1.0rem;
    overflow: hidden;
    font-weight: bold;
  }
  .buy-btn {
    width: 80px;
    height: 25px;
    float: right;
    line-height: 25px;
    font-size: 1.2rem;
    margin-bottom: 5px;
    margin-right: 5px;
    color: #fff;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: #f04848;
    text-align: center;
  }

  a {
    text-decoration: none;
  }

  .div { margin:0 auto; }
</style>
<script>
function showHideDetail(id) {
  $("#"+id).toggle();
}
function postData(method, id) {
  var url = '/account/keywords/post/'
  if(method == 'ADD') {
    keyword = $('#new_keyword').val();
    if(null==keyword || ''==keyword) {
      alert('您没有输入关键字内容!');
      $('#new_keyword').focus();
      return;
    }
    include = $('#new_include').val();
    exclude = $('#new_exclude').val();
    expire_at = $('#new_expire_at').val();
  } else if(method == 'EDIT') {
    keyword = $('#item_'+id+'_keyword').val();
    include = $('#item_'+id+'_include').val();
    exclude = $('#item_'+id+'_exclude').val();
    expire_at = $('#item_'+id+'_expire_at').val();
  } else {
    keyword = '';
    include = '';
    exclude = '';
    expire_at = '';
  }
  $.ajax({
      type: 'POST',
      url: url,
      data: {
        'method' : method,
        'keyword': keyword,
        'include': include,
        'exclude': exclude,
        'expire_at': expire_at,
        'id': id
      },
      success: function (res) {
          console.log(res)
          if (res.status === 'SUCCESS') {
            alert(res.message);
            window.location.href = '/account/my/keywords/';
          } else {
            alert(res.message);
          }
      },
      error: function (res) {
          if (res.status == 500) {
              alert('服务器错误，提交失败！')
          }
      },
      dataType: 'json'
  });
}
</script>
{% endblock %}
{% block base_content %}
  <div class="weui-cells weui-cells_form">
    <div class="weui-cells__title">&nbsp;&nbsp;&nbsp;&nbsp;<h3>新添加商品关键字</h3></div>
    <div class="weui-cells__title">此页面为用户添加维护近期想要购买商品的关键字，添加成功后系统将在后台为您抓取该商品优惠信息，并且通过公众号实时推送！</div>
    <div class="weui-cell weui-cell_vcode">
      <div class="weui-cell__hd">
        <label class="weui-label">关键字</label>
      </div>
      <div class="weui-cell__bd">
        <input id="new_keyword" class="weui-input" type="text" placeholder="例:iphone">
      </div>
      <div class="weui-cell__ft">
        <button class="weui-vcode-btn">热门</button>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">包含</label></div>
      <div class="weui-cell__bd">
        <input id="new_include" class="weui-input" type="text" placeholder="例:plus|7|128G">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">排除</label></div>
      <div class="weui-cell__bd">
        <input id="new_exclude" class="weui-input" type="text" placeholder="例:线|壳|套">
      </div>
    </div>
    <!-- <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">提醒次数</label></div>
      <div class="weui-cell__bd">
        <input id="item_{{item.id}}_exclude" class="weui-input" type="text" placeholder="请输入一个数字">
      </div>
    </div> -->
    <div class="weui-cell">
      <div class="weui-cell__hd"><label for="" class="weui-label">有效日期至</label></div>
      <div class="weui-cell__bd">
        <input id="new_expire_at" class="weui-input" type="date" value="{{item.expire_at|date:'Y-m-d'}}">
      </div>
    </div>
    <a href="javascript:postData('ADD','');" class="weui-btn weui-btn_primary">添加</a>
    {% if items_follow %}
    <div class="weui-cells__title">&nbsp;&nbsp;&nbsp;&nbsp;<h3>已添加商品关键字列表</h3></div>
    {% for item in items_follow %}
    <div class="weui-cell weui-cell_switch">
      <div class="weui-cell__bd" style="cursor:hand;" onclick="showHideDetail('detail_{{item.id}}')">{{ item.keyword.name }}(提醒次数:{{item.notify_times}})</div>
      <div class="weui-cell__ft">
        <label for="item_{{item.id}}_keyword" class="weui-switch-cp">
          <input onclick="javascript:postData('TOGGLE','{{item.id}}')" id="item_{{item.id}}_keyword" class="weui-switch-cp__input" type="checkbox" {% if item.active %} checked="checked" {% endif %}>
          <div class="weui-switch-cp__box"></div>
        </label>
      </div>
    </div>
    <div id="detail_{{item.id}}" style="display:none;">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">包含</label></div>
        <div class="weui-cell__bd">
          <input id="item_{{item.id}}_include" class="weui-input" type="text" placeholder="请输入包含的字符，多个字符用'|'分隔" value="{{item.include}}">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">排除</label></div>
        <div class="weui-cell__bd">
          <input id="item_{{item.id}}_exclude" class="weui-input" type="text" placeholder="请输入排除的字符，多个字符用'|'分隔" value="{{item.exclude}}">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">有效日期至</label></div>
        <div class="weui-cell__bd">
          <input id="item_{{item.id}}_expire_at" class="weui-input" type="date" value="{{item.expire_at|date:'Y-m-d'}}">
        </div>
      </div>
      <div class="weui-cell">
        <a href="javascript:postData('EDIT','{{item.id}}');" class="weui-btn weui-btn_mini weui-btn_primary">修改</a>
        <a href="javascript:postData('DELETE','{{item.id}}');" class="weui-btn weui-btn_mini weui-btn_warn">删除</a>
      </div>
    </div>
    {% endfor %}
    {% endif %}
  </div>
{% endblock %}
